<template>
  <div>
    <van-search
      v-model="searchValue"
      show-action
      shape="round"
      background="#232937"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #left>
        <van-icon
          name="arrow-left"
          size="20"
          color="#d0d0d0"
          style="margin-right: 10px"
          @click="goBack"
        />
      </template>
      <template #action>
        <div @click="onSearch" style="color: #d0d0d0">搜索</div>
      </template>
    </van-search>
    <van-tabs v-model="active" animated>
      <van-tab title="热搜">
        <ul class="hot-box">
          <li class="hot-item" v-for="item in hotList" :key="item.id" @click="handleClick(item.name)">{{item.name}}</li>
        </ul>
      </van-tab>
      <van-tab title="视频">
        <video-list v-if="searchList.length > 0" :lists="searchList"/>
        <van-empty v-else description="暂无相关内容" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import searchApi from '@/api/search/search'
import VideoList from "@/components/videoList/index"
export default {
  name: "Search",
  components: {
    VideoList,
  },
  data() {
    return {
      active: 0,
      searchValue: "",
      searchList:[],
      hotList:[]
    };
  },
  created () {
    this.getHotList();
  },
  methods: {
    goBack() {
      this.$router.go("-1");
    },
    handleClick(data) {
      this.searchValue = data;
      this.onSearch();
    },
    async getHotList() {
      let res = await searchApi.getHots();
      if(res.code === 20000){
        this.hotList = res.data.data
      }else{
        this.$toast(res.msg)
      }
    },
    async onSearch() {
      let res = await searchApi.search(this.searchValue);
      if(res.code === 20000){
        this.searchList = res.data.data
        this.active = 1
      }else{
        this.$toast(res.msg)
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.hot-box{
  padding: 10px 15px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .hot-item{
    padding: 0 3px;
    margin: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    width: 45%;
    line-height: 30px;
    background: rgba(35, 41, 55, 0.8);
    border-radius: 5px;
    color: #fff;
  }
}
</style>